<template>
  <div class="home">
    <div id="container"></div>
  </div>
</template>

<script>
// @ is an alias to /src
import { onMounted } from "vue";
export default {
  name: "Home",
  components: {},
  setup(props) {
    // 在setup 函数里面 dom 节点还没有生成
    onMounted(() => {
      // onMounted（已经有dom节点） 是vue的生命周期
      let map = new AMap.Map("container", {
        zoom: 10, // 缩放级别
        center: [113.624931, 34.74725], //中心点坐标 (填的就是经纬度)
        viewMode: "3D", //使用3D视图
      });

      AMap.plugin(["AMap.ToolBar","AMap.Scale","AMap.HawkEye"], function () {
        //异步加载插件
        let toolbar = new AMap.ToolBar();
        map.addControl(toolbar);
        let scale = new AMap.Scale();
        map.addControl(scale);
        scale.hide(); // 控件的隐藏
        map.addControl(new AMap.HawkEye({isOpen:false}));
      });
    });
  },
};
</script>
<style lang="scss" scoped>
#container {
  width: 100%;
  height: 500px;
}
</style>
